<template>
    <div class="container" ref="containerRef" style="width: 100%; height: 100%"></div>
</template>

<script>
    import * as echarts from 'echarts'
    import echartsMixins from '@/mixins/echartsMixins'
    export default {
        name: 'chartYoY',
        mixins: [echartsMixins],
        props: {
            color: {
                type: String,
                default: '',
            },
            legend: {
                type: Array,
                default: () => [],
            },
            xAxisData: {
                type: Array,
                default: () => [],
            },
        },
        // watch:{
        //     legend:{
        //         handler(){
        //             console.log(this.legend, "^^^^^^^^^^^^^^^^");
        //         }
        //     }
        // },
        methods: {
            _$setChartOptions(data) {
                if (!this.chartHook) return
                this.chartHook.clear()
                if (data.length == 0) {
                    this.chartHook.showLoading({
                        text: '暂无数据',
                        showSpinner: false,
                        textColor: '#909399',
                        maskColor: '#0b2e63',
                        fontSize: '15px',
                    })
                } else {
                    this.chartHook.hideLoading()
                }

                const option = {
                    //color: ['#003AEA', '#0063FF', '#2B8EFF', '#1DC9F5'],
                    color: ['#2f9cff', '#ffb21f', '#67c23a', '#f56c6c'],
                    tooltip: {
                        trigger: 'axis',
                    },
                    grid: {
                        top: '18%',
                        left: '5%',
                        right: '5%',
                        bottom: '10%',
                        container: true,
                        containLabel: true,
                    },
                    legend: {
                        show: true,
                        textStyle: {
                            color: '#fff',
                        },
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: true,
                        data: this.xAxisData,
                        axisLine: {
                            lineStyle: {
                                color: 'rgba(216,240,255,0.8)',
                            },
                        },
                        axisLabel: {
                            margin: 12,
                            color: '#fff',
                        },
                    },
                    yAxis: {
                        type: 'value',
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: '#B0D7FF',
                            },
                        },
                        axisLabel: {
                            fontSize: 13,
                            color: '#D8F0FF',
                        },
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: '#B0D7FF',
                            },
                        },
                        // splitLine: {
                        //     lineStyle: {
                        //         color: '#2c5a8f',
                        //         type: 'dashed',
                        //     },
                        // },
                    },
                    series: this.source,
                }
                this.chartHook.setOption(option)
                requestAnimationFrame(() => this.chartHook?.resize())
            },
        },
    }
</script>
